Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure we use PST colours throughout #1927

Merged
merged 11 commits into from
Aug 6, 2024

Conversation

trallard
Copy link
Collaborator

Closes #1925

Also, as I was fixing the above issue, I took the opportunity to make some needed changes regarding text colour.
And I realised there was perhaps a missing style from the banner button.

@trallard trallard added kind: enhancement New feature or request tag: accessibility Issues related to accessibility issues or efforts labels Jul 15, 2024
docs/user_guide/web-components.rst Show resolved Hide resolved
@@ -61,12 +61,6 @@ a > code {
color: var(--pst-color-inline-code-links);
}

// Fix for Sphinx's "highlight" directive - this is an issue with our accessible pygments theme
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No longer needed now that we fixed accessible pygments

Comment on lines +96 to +97
// calculate the text color for the highlight color
--pst-color-#{$name}-highlight-text: #{a11y-combination($highlight-color)};
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we already calculate a WCAG conformant text colour for our semantic colours it made sense to do the same for highlight colours that are used for hover

Comment on lines +56 to +59
// applying the same style as the SD "buttons"
@include link-style-hover;

text-decoration-thickness: 1px;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems this was missed, so I added this to bring parity with other buttons @gabalafou unless there was a reason to leave this out?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct. Plus, I like this parity because the text underline suggests that the button is actually a link, which is the case.

@trallard trallard requested a review from gabalafou July 15, 2024 15:49
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to comment that on the issue but I only got to it now and I see there is a PR already, thanks for the quick response @trallard!

I see now that these colors are always available, not only when sphinx-design is an active extension which was confusing me when I wrote the issue.

@ThomasYAD
Copy link

Great to see this being fixed, as I was also trying to change the hover color of the 'back-to-top' button via a custom css file! However I saw that the same goes for the hover color for tables (this is also hard coded to a certain violet value in _color.scss ) Maybe that can also be changed? I am a css rookie so maybe I am mistaken and it isn't hard coded, in that case could you point me a way to edit this? :)

@OriolAbril
Copy link
Contributor

You can already change the table hover, it will be the color of whatever you have defined as --pst-color-table-row-hover-bg. You can follow the steps in https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html#base-variables to have these variables defined to whatever value you want, this css file can serve as example.

@ThomasYAD
Copy link

ThomasYAD commented Jul 23, 2024

You can already change the table hover, it will be the color of whatever you have defined as --pst-color-table-row-hover-bg. You can follow the steps in https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html#base-variables to have these variables defined to whatever value you want, this css file can serve as example.

Ah okay, thats great. I had been staring at the color userguide and trying different things for a few hours, but the "-bg" suffix requirement wasn't clear to me. Thank you for the quick response, the example and the help!

@trallard
Copy link
Collaborator Author

Ah okay, thats great. I had been staring at the color userguide and trying different things for a few hours, but the "-bg" suffix requirement wasn't clear to me. Thank you for the quick response, the example and the help!

Not so long ago, we changed our colour system, and therefore how we define colours, so it looks like this could be better documented/updated in the docs.
Thanks for the feedback!

Copy link
Collaborator

@gabalafou gabalafou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great! There's just one or two places that need some cleanup :)

Comment on lines 91 to 93

// TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work
// highlight is used for hover effects on buttons, here we make some fluid scaling
// to avoid jarring effects
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we delete lines 91-93? The same comment is made earlier, I think repeating it here adds noise

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes we can remove them I just substituted the text that was there before.

@each $name in $sd-semantic-color-names {
.sd-btn-#{$name} {
&:hover {
color: var(--pst-color-#{$name}-highlight-text) !important;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we should try upstreaming things like this?

@@ -66,25 +66,40 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors);

@mixin create-sd-colors($value, $name) {
// define the pst variables, so that downstream user overrides will work
@debug "Creating color variables for semantic color: #{$name}";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we're able to create AA conforming colors for everything except warning-highlight in light mode:

warning-highlight warning-highlight-text
#d27a07 #14181e

Contrast ratio 4.4:1.

Copy link
Collaborator Author

@trallard trallard Jul 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah there is no WCAG conformant combination with our text colours and the orange (at least how this is being calculated). And I did not want to spend hours and hours tweaking that to get perfect colours considering we only use these for hover effects.
The alternative would be to manually specify all the colours pst and sd and use our colour palette.
I mean we can do that since the colours are always present like mentioned in the comment above.
But there are tradeoffs to each approach.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense. I was actually trying to say that I was impressed that there was only one semantic color that didn't work. And it's not that far from the 4.5 target.

…n.scss

Co-authored-by: gabalafou <gabriel@fouasnon.com>
Copy link
Collaborator Author

@trallard trallard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @gabalafou

Copy link

Coverage report

This PR does not seem to contain any modification to coverable code.

@gabalafou gabalafou merged commit d47b30c into pydata:main Aug 6, 2024
29 checks passed
@trallard trallard deleted the trallard/fix-button-colours branch August 6, 2024 10:31
@drammock drammock mentioned this pull request Aug 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind: enhancement New feature or request tag: accessibility Issues related to accessibility issues or efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Back to top button colors
4 participants